<template>
  <div class="components-container">
    <div class="filter-container">
      <el-date-picker
        v-model="datePicker"
        ref="pick"
        size="small"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="-"
        :clearable="false"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
      >
      </el-date-picker>
      <el-select
        size="small"
        v-model="listQuery.applySource"
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in applySource"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listQuery.productName"
        clearable
        placeholder="产品"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in productName"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listQuery.userType"
        clearable
        placeholder="客群"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in userType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listQuery.strategyVersion"
        clearable
        placeholder="策略版本"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in strategyVersion"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter('季度')"
        type="primary"
        class="filter-item"
        ref="btnQuery"
      >
        查询
      </el-button>
      <el-button
        @click="handleReset('季度')"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
      >
        重置
      </el-button>
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
      >
        下载
      </el-button> -->
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        label="评分"
        prop="indicator"
        align="center"
      ></el-table-column>
      <el-table-column label="所有账户" align="left">
        <el-table-column
          label="账户数"
          prop="countOfAccount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="账户分数段占比"
          prop="ratioOfAccount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="好账户数"
          prop="countOfGoodAccount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="坏账户数"
          prop="countOfBadAccount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="坏账率（分数段）"
          prop="ratioOfBadAccount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="坏账率（累计）"
          prop="ratioOfBadAccountAcc"
          align="center"
        ></el-table-column>
        <el-table-column
          label="好坏帐户比（分数段）"
          prop="ratioOfGoodAndBad"
          align="center"
        ></el-table-column>
        <el-table-column
          label="好坏账户比（累计）"
          prop="ratioOfGoodAndBadAcc"
          align="center"
        ></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { parseTimeJS as parseTime } from '@/utils' // 时间控件
import {
  getApply,
  getProducts,
  getUserTypes,
  getStrategyVersions
} from '@/api/risksystem/riskMarket/search.ts'
import { getList } from '@/api/risksystem/riskMarket/sortingAbility.ts'

const defaultQuery = {}
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private productName = [] //产品名
  private applySource = [] //渠道
  private userType = [] //客群
  private strategyVersion = [] // 版本
  private startDate = new Date().setTime(
    new Date().getTime() - 3600 * 1000 * 24 * 30
  )
  private endDate = new Date()
  private tableData = []
  private datePicker: any = [
    this.formatDate(new Date(this.startDate)),
    this.formatDate(new Date())
  ]
  private listQuery: any = {
    applySource: '',
    productName: '',
    userType: '',
    strategyVersion: '',
    startDate: this.datePicker[0],
    endDate: this.datePicker[1]
  }
  created() {
    this.getTable()
    this.getApplylist()
    this.getProducts()
    this.getUserTypes()
    this.getStrategyVersions()
  }
  mounted() {
    // this.getApply()
  }
  @Watch('datePicker')
  private onDatePickerChange(value: boolean) {
    this.listQuery.startDate = this.datePicker ? this.datePicker[0] : undefined
    this.listQuery.endDate = this.datePicker ? this.datePicker[1] : undefined
  }
  // 搜索数据源获取
  private async getApplylist() {
    const res = await getApply()
    this.applySource = res.data.applySources
  }
  private async getProducts() {
    const res = await getProducts()
    this.productName = res.data.products
  }
  private async getUserTypes() {
    const res = await getUserTypes()
    this.userType = res.data.userTypes
  }
  private async getStrategyVersions() {
    const res = await getStrategyVersions()
    this.strategyVersion = res.data.strategyVersions
  }
  // 列表获取
  private async getTable() {
    const { data } = await getList({ search: this.listQuery })
    this.tableData = data.rows
  }

  // 查询、重置
  private handleFilter(val: string) {
    // this.listQuery.current_page = 1
    this.getTable()
  }
  private handleReset(val: string) {
    this.datePicker = [
      this.formatDate(new Date(this.startDate)),
      this.formatDate(new Date())
    ]
    this.listQuery = {
      applySource: '',
      productName: '',
      userType: '',
      strategyVersion: '',
      startDate: this.datePicker[0],
      endDate: this.datePicker[1]
    }
  }
  private downloand() {
    console.log('下载')
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    return year + '-' + month + '-' + date
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
